<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="container">
			用户名：<input type="text" v-model="username" placeholder="请输入用户名" />
			
			<hr />
			java语言的特征是什么? <br>
			A <input type="checkbox" value="A" v-model="feature" />封装<br>
			B <input type="checkbox" value="B" v-model="feature" />继承<br>
			C <input type="checkbox" value="C" v-model="feature" />接口<br>
			D <input type="checkbox" value="D" v-model="feature" />多态<br>
			你的答案是:{{feature.join(" ")}}

			<hr>
			你的性别是：
			<label><input type="radio" value="1" v-model="gender" />男</label>
			<label><input type="radio" value="2" v-model="gender" />女</label>
			<label><input type="radio" value="3" v-model="gender" />保密</label><br>
			你选择的性别是：{{getGender}}
			
			<hr>
			学历：
			<select v-model="edu">
				<option disabled="disabled" value="">请选择</option>
				<option v-for="(e,index) in edus" :key="index">{{e}}</option>
			</select>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#container",
				computed: {
					getGender: function() {
						if (this.gender == 1) {
							return '男'
						} else if (this.gender == 2) {
							return '女'
						} else {
							return '保密'
						}
					}
				},
				data: {
					username: "",
					feature: [],
					gender: 3,
					edus: ["高中", "大学", "小学", "博士"],
					edu: ""
				}
			})
		</script>
	</body>
</html>
